<template>
    <view>
		<view class="scroll_container flex">
			<view class=" all" @click="getCategory(0)" :class="category == 0 ? 'active' : ''">全部</view>
			<uv-scroll-list :indicator="false">
			<view v-for="(item, index) in list" :key="index">
				<view class="category_items" :class="category == item.id ? 'active' : ''" @click="getCategory(item.id)">{{item.name}}</view>
			</view>
			</uv-scroll-list>
		</view>
		<view>

		<view class="activity_container flex"     
			@click="goDetails(item.id)"
		v-for="(item,i) in activityList"
        :key="item.id"> 
			<view>	<uv-image :src="item.activity_image" width="350rpx" height="200rpx"></uv-image></view>
			<view class="activity_right flex flex-wrap">
				<view class="title">{{item.title}}</view>
				<view class="add_time">{{item.start_time}}</view>
				<view class="usepeople flex">适合人群:<view>{{item.use_people}}</view></view>
				<view class="activity_status">
					<view class="activity_button flex"><uv-tags :text="item.status" type="warning"></uv-tags>
</view>
				</view>
			</view>
		</view>
		</view>
    </view>
</template>

<script>
	import http from '@/utils/request.js'
    export default {
        data() {
			return {
                list: [
					{
						name:"测试",
						id:1,
					},
				],
				activityList : [
	
				],
				page:1,
				category:0,
            }
        },
		onLoad() {
			this.getInfo();
		},
		methods:{
			goDetails(id){
				uni.navigateTo({
					url:'/pages/booking/activity_info?id='+id
				})
			},
			getCategory(category_id){
				this.page = 1;
				this.category = category_id
				var args = {page:this.page,category_id:this.category}
				this.activityList = [];
				http.post('api/activity/index',args).then(res=>{
					this.list = res.data.category;
					var list = res.data.list.data;
					for(let i = 0; i < list.length; i++){
						this.activityList.push({
							id:list[i].id,
							title:list[i].title,
							start_time:list[i].activity_time_text,
							use_people:list[i].use_personnel,
							activity_image:http.common.baseUri+list[i].activity_image,
							status:list[i].status_text,
						})
					}
				})
			},
			getInfo(){
				var args = {page:this.page,category:this.category}
				http.post('api/activity/index',args).then(res=>{
					this.list = res.data.category;
					var list = res.data.list.data;
					for(let i = 0; i < list.length; i++){
						console.log(http.common.baseUri+list[i].activity_image)
						this.activityList.push({
							id:list[i].id,
							title:list[i].title,
							start_time:list[i].activity_time_text,
							use_people:list[i].use_personnel,
							activity_image:http.common.baseUri+list[i].activity_image,
							status:list[i].status_text,
						})
					}
				})
			},
		
		},
		onReachBottom(){
			this.page++;
			this.getInfo();
		}
    }
</script>

<style lang="scss">
	.flex {
		display:flex;
	}
	.flex-wrap {
		flex-wrap: wrap;
	}
	.scroll_container {
		padding-left: 30rpx;
		height: 80rpx;
		padding-top: 40rpx;
		background-color: #eee;
		font-size: 30rpx;
		.all { margin-right: 40rpx;}
		.active {
			color: skyblue;
		}
		.category_items{
			padding: 0 8rpx;
		}
	}
	.activity_container {
		margin: 30rpx 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
		.activity_right {
			padding-left: 20rpx;
			flex-direction: column;
			justify-content: space-around;
			font-size: 30rpx;
			.add_time,.usepeople,.activity_status {
				font-size: 22rpx;
			}

		}
	}
</style>
